<template>
  <div id="root">
    <el-row :gutter="20">
      <el-col :span="8" :offset="1">
        <div id="new_left">
          <p>创建部门</p>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="部门编号" prop="number">
              <el-input v-model="ruleForm.number"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="部门描述" prop="desc">
              <el-input v-model.number="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="subMit('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12" :offset="1">
        <div id="new_right">
           <p>所有部门信息</p>
      <el-table
        :data="tableDatas"
        height="380"
        style="width: 550px">
        <el-table-column style="height: 100px"
                         prop="number"
                         label="部门编号"
                         width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="部门名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="desc"
          width="250"
          label="部门描述">
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="page_size"
          @prev-click="prevfun"
          @next-click="nextfun"
          @current-change="currentchange"
        >
        </el-pagination>
      </div>
        </div>
      </el-col>
    </el-row>

<!--    <div id="root-left">-->

<!--    </div>-->
<!--    <div id="root-right">-->
<!--     -->
<!--    </div>-->
  </div>
</template>

<script>
  export default {
    name: 'CreatePartView',
    data () {
      var checkDesc = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入部门描述信息'))
        }

      }
      var checkNumber = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入部门编号'))
        } else if (value.length !== 6) {
          callback(new Error('部门编号必须的6位数'))
        } else {
          callback()
        }
      }
      var checkName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入部门名称'))
        } else {
          callback()
        }
      }
      return {
        tableDatas: [],
        //需要展示的数据的总数
        total: 5, //先设置给初始值，只给空字符串''会报typeerror
        //下一页
        next: '',
        //上一页
        prev: '',
        //每页总数
        page_size: 1,//先设置给初始值，只给空字符串''会报typeerror
        ruleForm: {
          number: '',
          name: '',
          desc: ''
        },
        rules: {
          number: [
            {
              validator: checkNumber,
              trigger: 'blur'
            }
          ],
          name: [
            {
              validator: checkName,
              trigger: 'blur'
            }
          ],
          desc: [
            {
              validator: checkDesc,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      get_data (page = 1) {
        this.$axios({
          url: this.$settings.base_url + '/user/showpart/?page=' + page,
          method: 'get',
          headers: {
            'AUTHORIZATION': sessionStorage.getItem('oatoken')
          }
        }).then(res => {
          this.tableDatas = res.data.results
          this.total = res.data.count
          this.page_size = res.data.page_size

        })
      },
      subMit (formName) {
        this.$axios({
          url: this.$settings.base_url + '/user/createpart/',
          method: 'post',
          data: this.ruleForm,
          headers: { AUTHORIZATION: sessionStorage.getItem('oatoken') }
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('创建部门成功')
            this.resetForm(formName)
          } else {
            this.$message.error('部门编号必须唯一、部门名必须唯一！！！')
          }
        }).catch(error => {
          this.$message.error(error)
        })
      },

      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      //分页器的三个函数
      prevfun (value) {
        //value拿到的当前的页码
        this.get_data(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_data(value)
      },
      currentchange (value) {
        this.get_data(value)

      },
    },
    mounted () {
      //初始化数据
      this.get_data()

    }
  }
</script>

<style scoped>
  /*整个大标签*/
  #root {
    height: 590px;
    background-color: white;
    box-shadow: 0 0 25px #333333;
    text-align: left;
  }

  /* 左div样式*/


  #root-left {
    width: 400px;
    height: 540px;
    /*border: 1px solid skyblue;*/
    margin-left: 20px;
    margin-top: 10px;
    display: inline-block;
    text-align: center;
    border: 1px solid #a09595;
    border-radius: 10px;
  }

  #root-left > p {
    font-size: 18px;
  }

  /*左侧重输入框*/
  .demo-ruleForm {
    margin-top: 10px;
    margin-right: 10px;

  }

  /*右div样式*/
  #root-right {
    /*background-color: #333333;*/
    color: #070409;
    display: inline-block;
    height: 540px;
    width: 550px;
    border: 1px solid #a09595;
    margin-right: 20px;
    margin-top: 10px;
    float: right;
    border-radius: 10px;
  }

  #root-right > p {
    font-size: 18px;
    text-align: center;
  }

  #root-right > .pagenation {
    text-align: center;

  }

  #root-right > .el-table {
    height: 420px;
    width: 550px;
  }

  /*上面是右侧样式*/
  /*下面是整个root标签的样式*/

  #new_right{
    margin-top: 30px;
    text-align: center;
  }
  #new_left{
    margin-top: 30px;
    text-align: center;
  }
</style>
